import 'package:pacsun/theme/app_Colors.dart';
import 'package:pacsun/view/task/widgets/cache_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'dart:math';

class Header extends StatefulWidget {
  const Header({super.key});

  @override
  State<Header> createState() => _HeaderState();
}

class _HeaderState extends State<Header> {
  final ScrollController _scrollController = ScrollController();
  double percent = 0;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }

  // 指示器动画监听滚动
  void _onScroll() {
    if (_scrollController.position.maxScrollExtent > 0) {
      percent = _scrollController.position.pixels /
          _scrollController.position.maxScrollExtent;
    }
    // percent 范围 0~1，1表示滚动到底 更新动画
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      // height: 726.h,
      height: 626.h,
      // height: 1076.h,
      padding: EdgeInsets.only(bottom: 42).r,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Stack(
            clipBehavior: Clip.none,
            children: [
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                controller: _scrollController,
                child: Padding(
                  padding: EdgeInsets.only(top: 32).r,
                  child: Column(
                    children: [
                      CacheNetworkImage(
                        imageUrl: 'assets/imgs/PhotoWall.png',
                        width: 841.w,
                        height: 480.h,
                        imageType: ImageType.asset,
                        fit: BoxFit.contain,
                      ),
                    ],
                  ),
                ),
              ),
              Container(
                width: double.infinity,
                height: 319.h,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/imgs/beComeBg1.png'),
                    fit: BoxFit.fitWidth,
                  ),
                ),
                child: Column(
                  children: [
                    SizedBox(height: kToolbarHeight),
                    TransformRotate(
                      child: Row(
                        spacing: 5.w,
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          SizedBox(width: 36.w),
                          Text(
                            'M',
                            style: customTextStyle(
                              fontSize: 65,
                              fontWeight: 800,
                              shadows: [
                                Shadow(
                                  color: Color(0x59000000),
                                  offset: Offset(4.94, 4.94),
                                  blurRadius: 0,
                                ),
                              ],
                            ),
                          ),
                          Text(
                            'EET OUR',
                            style: customTextStyle(
                                fontSize: 35, fontWeight: 800, height: 1.5),
                          ),
                          Text(
                            '💫',
                            style:
                                customTextStyle(fontSize: 68, fontWeight: 400),
                          ),
                        ],
                      ),
                    ),
                    TransformRotate(
                      child: Text(
                        'BOLD & UNIQUE',
                        style: customTextStyle(
                          fontSize: 42,
                          fontWeight: 800,
                          color: FamilyTextColor.yellow,
                          shadows: [
                            Shadow(
                              color: Color(0x59000000),
                              offset: Offset(5.12, 5.12),
                              blurRadius: 0,
                            ),
                          ],
                        ),
                      ),
                    ),
                    TransformRotate(
                      child: Text(
                        'COMMUNITY',
                        style: customTextStyle(
                          fontSize: 42,
                          fontWeight: 800,
                          color: FamilyTextColor.yellow,
                          shadows: [
                            Shadow(
                              color: Color(0x59000000),
                              offset: Offset(5.12, 5.12),
                              blurRadius: 0,
                            ),
                          ],
                        ),
                      ),
                    ),
                    TransformRotate(
                      child: Text(
                        'OF STYLE CREATORS',
                        style: customTextStyle(
                          fontSize: 30,
                          fontWeight: 800,
                          height: 36 / 30,
                          shadows: [
                            Shadow(
                              color: Color(0x59000000),
                              offset: Offset(3.31, 3.31),
                              blurRadius: 0,
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Positioned(
                bottom: -150.h,
                left: 0,
                child: Container(
                  width: 375.w,
                  height: 276.h,
                  padding: EdgeInsets.only(top: 47).r,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        Color.fromRGBO(7, 5, 28, 0), // 透明
                        Color(0xFF08051D), // 不透明
                      ],
                      stops: [0.0, 0.4558], // 对应 0% 和 45.58%
                    ),
                  ),
                  child: Column(
                    children: [
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 15).r,
                        child: Text(
                          'This is a creative circle of trendsetters，storytellers, and fashion-first thinkers repping real style and real communtiy',
                          style: customTextStyle(
                            fontSize: 14,
                            fontWeight: 500,
                          ),
                          textAlign: TextAlign.center,
                        ),
                      ),
                      SizedBox(height: 16.h),
                      Stack(
                        children: [
                          Container(
                            width: 188.w,
                            height: 3.h,
                            decoration: BoxDecoration(
                              color: Colors.white.withAlpha(76),
                              borderRadius: BorderRadius.circular(2.5).r,
                            ),
                          ),

                          AnimatedPositioned(
                            duration: Duration(milliseconds: 300),
                            left: percent * (188.w - 25.w),
                            top: -1.h,
                            child: Container(
                              width: 25.w,
                              height: 5.h,
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(2.5).r,
                              ),
                            ),
                          ),
                          // Positioned(
                          //   top: -1.h,
                          //   left: 20.w,
                          //   child: Container(
                          //     width: 25.w,
                          //     height: 5.h,
                          //     decoration: BoxDecoration(
                          //       color: Colors.white,
                          //       borderRadius: BorderRadius.circular(2.5).r,
                          //     ),
                          //   ),
                          // )
                        ],
                      ),
                      Container(
                        width: 295.h,
                        margin: EdgeInsets.only(top: 40).r,
                        child: Text(
                          'Why Join PACSUN Community ?',
                          style: customTextStyle(
                            fontSize: 24,
                            fontWeight: 700,
                            height: 32 / 24,
                          ),
                          maxLines: 2,
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class TransformRotate extends StatelessWidget {
  final Widget child;
  const TransformRotate({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      angle: -(3 * pi / 180), // 旋转8.44度
      child: child,
    );
  }
}
